.files-browser {

  .preview-sidebar {
    width: 400px;
    flex: 0 0 400px;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #ddd;

    .archive-info {
      padding: 10px;

      .header {
        &:extend(.flex);
        justify-content: space-between;
        align-items: center;

        .actions {

          i.fa-ellipsis-v {
            font-size: .95rem;
          }

          i.fa-plus {
            font-size: .675rem;
            margin-left: 2px;
          }
        }
      }

      h1,
      .archive-icon {
        display: inline-block;
      }

      h1 {
        margin: 0;
        padding: 0;
        font-size: .95rem;
        font-weight: 500;
        max-width: 250px;
        overflow: hidden;
      }

      .desc {
        font-size: 12px;
        color: @color-text--muted;
      }
    }

    .preview {
      text-align: center;
      padding: 15px;

      .icon-wrapper {
        margin: 40px 0 20px;

        .icon {
          width: 100px !important;
          height: auto !important;
          border: 0;
        }
      }

      .text,
      img,
      video,
      audio {
        max-width: 100%;
        border: 1px solid #ddd;
        border-radius: 2px;
      }

      img {
        border: 0;
      }

      .text {
        font-family: Monaco, 'Lucida Console', Consolas, monospace;
        padding: 2px 5px;
        text-align: left;
        white-space: pre;
        font-size: 0.65rem;
        max-height: 50vh;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }

    .metadata {
      padding: 15px;
      color: rgba(0,0,0,.75);
      font-size: 11.75px;

      .name {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 10px;
        word-wrap: break-word;
      }

      table {
        width: 60%;
        margin: auto;
      }

      td {
        padding: 0;

        &.label {
          width: 40%;
          text-align: right;
          padding-right: 8px;
          color: #aaa;
        }
      }
    }
  }
}